<template>
  <div>
    <template v-for="(item, index) in getOptions" :key="index">
      <span>{{ index != 0 ? '、' : '' }}{{ item[config.label] }}</span>
    </template>
  </div>
</template>
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    options: any[]
    value: any
    config: Record<string, string>
  }>(),
  {
    options: () => [],
    config: () => ({
      label: 'name',
      value: 'value'
    })
  }
)

const values = computed(() => {
  if (props.value !== null && typeof props.value !== 'undefined') {
    return Array.isArray(props.value) ? props.value : String(props.value).split(',')
  } else {
    return []
  }
})

const getOptions = computed(() => {
  return props.options.filter((item) => values.value.includes(item[props.config.value]))
})
</script>
